<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>变成红色</div>
  </body>
</html>
<script>
  // var 、let、const
  // var 、let 是用来声明变量的

  // var 存在变量提升 (提升的是变量名，并不包含变量值) let 不存在变量提升
  //   console.log(a);
  //   var a = 10;

  // let 有块级作用域( 以 {} 为分界 ) var 没有
  //   if (true) {
  //     var a = 10;
  //   }
  //   console.log(a);
  //   for (let i = 0; i <script 10; i++) {
  //     // console.log(i);
  //     setTimeout(() => {
  //       console.log(i);
  //     });
  //   }

  // 暂时性死区

  //   let a = 10;
  //   function fn() {
  //     // 这时候就出现了暂时性死区
  //     // 变量的就近原则
  //     a = 20;
  //     let a = 30;
  //     console.log(a);
  //   }
  //   fn();

  //   const 声明常量的（声明常量的时候必须有值），有块级作用域
  //   const a = 10; // 不变的量 (const 声明的常量不允许修改)
  //   a = 20;
  //   console.log(a);
  // 当声明的常量是一个引用数据类型的时候，是可以修改的
  //   const obj = { name: "李豁子" };
  //   //   obj.name = "李四";
  //   //   console.log(obj);
  //   obj = { name: "李四" };
  //   console.log(obj);

  //   let obj = {
  //     name: "王二小",
  //     done: function () {
  //       console.log(this);
  //       setTimeout(
  //         function () {
  //           console.log(this);
  //         }.bind(obj),
  //         1000
  //       );
  //     },
  //   };
  //   obj.done();

  // 箭头函数不固话this指向，箭头函数中，this 指向只和 声明箭头函数的作用域的this指向有关系

  // this 指向
  // 在普通函数中 this 指向 window
  // 构造函数中 this 指向的是实例化出来的对象。
  // 在 class 中 this 指向的是实例化出来的对象。
  // 在箭头函数中，this 和 声明箭头函数的作用域this保持一致
  // 在对象中的函数this指向，谁调用指向谁
  // 在 setTimeout 指向 window

  //   call apply bind 改变this指向
  //   let obj = { name: "佳乐", num: 10 };
  //   function fn(x, y) {
  //     console.log(this);
  //     return (x + y) * this.num;
  //   }
  // call 第一个参数传入指向的对象
  // 第 n 个参数，就是函数所需的实参
  //   let i = fn.call(obj, 1, 2);
  //   console.log(i);

  // apply 第一个参数传入指向的对象 第二个参数 是一个数组，函数要传入的实参
  //   let i = fn.apply(obj, [1, 2]);
  //   console.log(i);

  // bind 改变this指向不会立即调用
  //   fn.bind(obj)(1, 2);

  //   function Domcli(val) {
  //     // 构造函数
  //     this.el = document.querySelector(val);
  //     this.color = "red";
  //     console.log(this);
  //     this.el.onclick = function () {
  //       this.el.style.color = this.color;
  //       //   console.log(this);
  //     }.bind(this);
  //   }

  //   let obj = new Domcli("div");
  //   console.log(obj);

  //   let arr = [1, 2, 3, 4, 5, 6, 5, 4, 3, 2];

  //   let arr1 = [...new Set(arr)];
  //   console.log(arr1);

  let arr = [
    { value: 1 },
    { value: 2 },
    { value: 3 },
    { value: 1 },
    { value: 2 },
  ];

  //   let arr1 = [...new Set(arr)];
  //   console.log(arr1);

  function fn(arr) {
    let arr1 = [1];
    return arr.filter(
      // true true
      (item) => !arr1.includes(item.value) && arr1.push(item.value)
    );
  }

  console.log(fn(arr));

  let arr2 = [];
  // push 数组的长度
  console.log(arr2.push(50));
  console.log(arr2.push(40));
</script>
